<template>
  <div class="detail-form">
    <el-dialog
      title="策略详情"
      :visible="detailDialogShow"
      @close="dialogFormH"
    >
      <el-form ref="form" label-width="100px">

        <el-form-item label="策略名称：">
          <span>{{ row.policyName }}</span>
        </el-form-item>

        <el-form-item label="策略方案：">
          <el-table
            :data="policyDetail"
            style="width: 100%"
            :header-cell-style="{background:'#f3f6fb'}"
          >
            <el-table-column
              prop="areaId"
              label="序号"
              width="180"
              type="index"
            />
            <el-table-column
              prop="nodeName"
              label="定位名称"
              width="180"
            />
            <el-table-column
              prop="innerCode"
              label="设备编号"
            />
          </el-table>
        </el-form-item>

      </el-form>

      <!-- 分页部分内容 -->
      <div class="pageSize">
        <span class="el-pagination__total">  共{{ policyList.totalCount }}条数据  <span>第{{ policyList.pageIndex }}/{{ policyList.totalPage }}页</span></span>
        <div class="right">
          <el-pagination
            layout="prev, next"
            background
            :total="Number(policyList.totalCount)"
            prev-text="上一页"
            next-text="下一页"
            hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 分页部分内容 -->
    </el-dialog>
  </div>
</template>

<script>
import { getvmList } from '@/api/aliceRequests'
export default {
  name: '',
  components: {

  },
  filters: {

  },
  props: {
    row: {
      type: Object,
      required: true
    },
    detailDialogShow: {
      type: Boolean,
      required: true
    }

  },
  data() {
    return {
      queryObj: {
        pageIndex: 1,
        pageSize: 10
      },
      policyList: {},
      policyDetail: []
    }
  },

  methods: {
    async getvmGoodsListDetail() {
      // console.log(this.row.policyId)
      const res = await getvmList(this.row.policyId, this.queryObj)
      this.policyDetail = res.currentPageRecords
      this.policyList = res
      // console.log(res)
    },

    dialogFormH() {
      this.$refs.form.resetFields()
      this.$emit('update:detailDialogShow', false)
    },
    // 进入某一页
    handleCurrentChange(pageNum) {
      this.queryObj.pageIndex = pageNum
      this.getvmGoodsListDetail()
    },
    // 每页显示信息条数
    handleSizeChange(pageSize) {
      this.queryObj.pageSize = pageSize
      this.queryObj.pageIndex = 1
      this.getvmGoodsListDetail()
    }

  }
}
</script>

<style scoped lang='scss'>
 .pageSize{
    margin: 20px;
    display: flex;
    justify-content: space-between;
    height: 28px;
    line-height: 28px;
    .el-pagination__total{
      flex: 1;
      font-size: 16px!important;
      color: #dbdfe5!important;
    }

  }
</style>
